<template>
  <view>
    <view
      class="fixed l-0 b-0 flex tabbar"
      :style="{
        width: _width + 'px',
        height: _totalBarHeight + 'px',
        transform: `translateY(${props.bottom}rpx)`,
        zIndex: props.zIndex,
      }"
    >
      <!-- 			@click="emits('click', $event)"    -->
      <view class="relative" style="top: 0px">
        <tm-sheet
          :blur="_blur"
          :color="props.color"
          parenClass="relative"
          class="relative"
          :followTheme="props.followTheme"
          :dark="props.dark"
          :round="props.round"
          :shadow="props.shadow"
          :outlined="props.outlined"
          :border="0"
          borderDirection="top"
          :text="props.text"
          :transparent="false"
          :linear="props.linear"
          :linearDeep="props.linearDeep"
          :margin="[0, 0]"
          :padding="[0, 0]"
          :height="_BarHeight"
          :width="_width"
          unit="px"
        ></tm-sheet>
      </view>
      <view
        class="absolute flex flex-col l-0"
        :style="{ width: _width + 'px', height: _totalBarHeight + 'px' }"
      >
        <view
          class="relative barcont flex flex-row flex-row-top-center flex-around flex-1"
          :style="{ width: _width + 'px' }"
        >
          <slot></slot>
        </view>
      </view>
    </view>
    <view :style="{ width: _width + 'px', height: _totalBarHeight + 'px' }"></view>
  </view>
</template>

<script lang="ts" setup>
  /**
   * 底部导航栏
   * @description 内部只能放置,tm-tabbar-item
   */
  import tmSheet from '../tm-sheet/tm-sheet.vue';
  import tmText from '../tm-text/tm-text.vue';
  import tmIcon from '../tm-icon/tm-icon.vue';
  import { custom_props } from '../../tool/lib/minxs';
  import {
    getCurrentInstance,
    computed,
    Ref,
    ref,
    provide,
    inject,
    onUpdated,
    onMounted,
    onUnmounted,
    nextTick,
    watch,
    PropType,
  } from 'vue';
  import { useTmpiniaStore } from '../../tool/lib/tmpinia';
  const store = useTmpiniaStore();
  const emits = defineEmits(['change', 'update:active']);
  const props = defineProps({
    ...custom_props,
    transparent: {
      type: [Boolean],
      default: false,
    },
    color: {
      type: [String],
      default: 'white',
    },
    text: {
      type: [Boolean],
      default: false,
    },
    round: {
      type: [Number],
      default: 0,
    },
    shadow: {
      type: [Number],
      default: 0,
    },
    //如果为0取当前窗口宽度。
    width: {
      type: [Number],
      default: 0,
    },
    //底部偏移
    bottom: {
      type: [Number],
      default: 0,
    },
    //是否显示安全区域
    showSafe: {
      type: [Boolean],
      default: false,
    },
    //动态激活项的索引-1表示不激活任何项。
    active: {
      type: Number,
      default: -1,
    },
    //是否自动选中。如果禁用，则用户通过active来切换选中值，否则，点击项目时自动选中。
    autoSelect: {
      type: Boolean,
      default: true,
    },
    /** 在nvue上没有用处，请自行放到最尾部的地方。 */
    zIndex: {
      type: [Number],
      default: 200,
    },
  });
  let sys = uni.getSystemInfoSync();
  const _width = computed(() => uni.upx2px(props.width) || sys?.windowWidth || 750);
  const _blur = computed(() => props.blur);
  const _activeUrl = ref('');
  const _activeUid = ref('');
  const tmTabbarId = 'tmTabbarId';
  const _cachlist: Ref<Array<string | number>> = ref([]);
  const _showSafe = ref(props.showSafe);
  const _activeIndex = ref(props.active);
  const win_bottom = sys?.safeAreaInsets?.bottom ?? 0;
  if (win_bottom > 0) {
    _showSafe.value = true;
  }

  const _totalBarHeight = computed(() => {
    // if (_showSafe.value) return 90;
    return 75;
  });
  const _BarHeight = computed(() => {
    if (_showSafe.value) return 75;
    return 60;
  });
  function setNowurl(url: string, nowuid: number) {
    _activeUrl.value = url;
    _activeUid.value = String(nowuid);
  }
  function pushKey(uid: number) {
    _cachlist.value = [...new Set([..._cachlist.value, uid])];
  }
  function delKey(uid: number) {
    _cachlist.value = _cachlist.value.filter((el) => el != uid);
  }
  defineExpose({ tmTabbarId, setNowurl, pushKey, delKey });
  provide(
    'tmTabbarUrl',
    computed(() => _activeUrl.value),
  );
  provide(
    'tmTabbarUid',
    computed(() => _activeUid.value),
  );
  provide(
    'tmTabbarWidth',
    computed(() => Math.ceil(_width / _cachlist.value.length)),
  );
  provide(
    'tmTabbarItemList',
    computed(() => _cachlist.value),
  );
  provide(
    'tmTabbarItemActive',
    computed(() => _activeIndex.value),
  );
  provide('tmTabbarItemSafe', _showSafe.value);
  provide(
    'tmTabbarItemAutoSelect',
    computed(() => props.autoSelect),
  );
  watch(
    () => props.active,
    () => {
      if (props.active == _activeIndex.value) return;
      _activeIndex.value = props.active;
    },
  );
  watch(_activeIndex, () => {
    emits('change', _activeIndex.value);
    emits('update:active', _activeIndex.value);
  });
</script>

<style lang="scss">
  /* #ifdef APP-NVUE */
  .barcont {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  /* #endif */
  /* #ifndef APP-NVUE */
  .barcont {
    display: flex;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: flex-start;
  }
  /* #endif */
</style>
